@charset "utf-8";
.position-margin{
    position:absolute;
    margin:0 auto;
    left:0;
    right:0;
}

//page03部分开始
.page03{
    position:relative;
    overflow: hidden;
    .page03-border{
        img{
            width:146px;
            height:246px;
            position:absolute;
            margin:0 auto;
            left:30px;
            right:0;
//          top:169px;
            top:-50%;
        }
    }
    .content-border{
        width:146px;
        height:246px;
        position:absolute;
        margin:0 auto;
        top:169px;
        left:30px;
        right:0;
        .page03-daughter{
            @extend .position-margin;
//          left:-55px;
            left:500%;
            bottom:-20px;
            
        }    
        .page03-mother-speech01{
            @extend .position-margin;
            left:95px;
            top:60px;
            opacity: 0;
        }  
        .page03-mother-speech02{
            @extend .position-margin;
            left:-85px;
            top:-200%;
//          top:-145px;
        } 
        .page03-mother{
            @extend .position-margin;
//          left:-175px;
            left:-600%;
            top:15px;
        }
        .page03-mother-shadow{
            @extend .position-margin;
//          left:-55px;
            left:-600%;
            bottom:-24px;
        }
        .page03-mother-ball{
            @extend .position-margin;
            left:-78px;
            top:97px;
            transform:scaleY(0.7);
            opacity: 0;
        }
        .page03-mother-sd{
            @extend .position-margin;
            left:-120px;
            top:30px;
            transform: rotateZ(10deg) scaleY(0.3);
            opacity: 0;
        }
        .page03-mother-title{
            @extend .position-margin;
            width:250px;
            height:30px;
            background: #0D1744;
            color:white;
            line-height: 30px;
            text-align: center;
            font-size: 12px;
            top:270px;
    //      left:-90px;       
            left:-500%;
            opacity: 0;
     

        }
    }
}
//page03部分结束



.page03.active{
    .page03-border{
        img{
            animation: page03-border 300ms ease 100ms forwards;
        }
    }
    .content-border{
        .page03-daughter{
            animation: page03-daughter 600ms ease 500ms forwards;
        }    
        .page03-mother-speech01{
            animation: page03-mother-speech01 300ms ease 800ms forwards;
        }
        .page03-mother-shadow{
            animation: page03-mother-shadow 600ms ease 800ms forwards;
        }
        .page03-mother{
            animation: page03-mother 500ms ease 800ms forwards;
        }
        .page03-mother-ball{
            animation: page03-mother-ball 2.4s ease 1.4s infinite;
        }
        .page03-mother-speech02{
            animation: page03-mother-speech02 300ms ease 1.2s forwards;
        }
        .page03-mother-sd{
            animation: page03-mother-sd 300ms ease 1.5s  infinite;
        }
         //title部分开始
        .page03-mother-title{
            animation:page03-mother-title 400ms ease 2s forwards ;       
        }
        //title部分开始
    }
}
//page03border部分开始

//page03-border部分开始
@keyframes page03-border{
    0%{}
    33%{top:169px;}
    66%{top:155px;}
    100%{top:169px;}
}
//page03-border部分开始


//女儿部分开始
@keyframes page03-daughter{
    0%{}
    20%{left:-65px;}
    40%{left:-45px;}
    60%{
        left:-60px;
    }
    80%{
        left:-50px;
    }
    100%{left:-55px;}
}
//女儿部分结束

//page03-mother-speech01部分开始
@keyframes page03-mother-speech01{
    0%{}
    50%{
        opacity:1;transform: scale(1.3);
    }
    100%{
        opacity: 1;transform: scale(1);
    }
}
//page03-mother-speech01部分结束

//page03-mother-shadow部分开始
@keyframes page03-mother-shadow{
    0%{}
    33%{left:-40px;}
    66%{left:-65px;}
    100%{left:-55px;}
}
//page03-mother-shadow部分结束

//page03-mother部分开始
@keyframes page03-mother{
    0%{}
    33%{left:-150px;}
    66%{left:-185px;}
    100%{left:-175px;}
}
//page03-mother部分结束

//page03-mother-ball部分开始
@keyframes page03-mother-ball{
    0%{}
    100%{transform: scaleY(1);opacity: 1;}
}
//page03-mother-ball部分结束


//page03-mother-speech02部分开始
@keyframes page03-mother-speech02{
    0%{}
    33%{top:-125px;}
    66%{top:-155px;}
    100%{top:-145px;}
}
//page03-mother-speech02部分结束

//page03-mother-sd部分开始
@keyframes page03-mother-sd{
    0%{}
    25%{
        transform: scaleY(1.3) rotateZ(10deg);opacity: 1;
    }
    50%{
       transform: scaleY(0.8) rotateZ(10deg);opacity: 1; 
    }
    75%{}
    100%{transform: scaleY(1) rotateZ(10deg);opacity: 1;}
}
//page03-mother-sd部分结束

//title部分开始
@keyframes page03-mother-title{
    0%{}
    33%{opacity:1;left:-25px;}
    66%{opacity:1;left:-65px;}
    100%{
        opacity:1;left:-55px;
    }
    
}
//title部分结束